<template>
  <el-card>
    <!-- <el-tag :key="tag" v-for="(tag,index) in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)" :type="tagType[index]" @click="routerJump()">
      {{tag}}
    </el-tag> -->
    <el-tag :key="tag.name" v-for="(tag,index) in tagName" closable :disable-transitions="false" @close="handleClose(tag.name)" :type="tagType[index]" @click="routerJump(tag.router)">
      {{tag.name}}
    </el-tag>
  </el-card>
</template>

<script>
export default {
  name: 'HeadTag',
  props: ['tagName', 'curTag'],
  data () {
    return {
      tagType: ['', '', '', '', ''],
    }
  },
  methods: {
    handleClose (tag) {
      this.tagName.forEach((val, index) => {
        if (val.name === tag) {
          this.tagName.splice(index, 1)
        }
      })
      this.changeType()
      // this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    //判断当前页改变type值
    changeType () {
      this.tagName.forEach((val, index) => {
        if (val.name === this.curTag) {
          this.tagType[index] = 'danger'
        } else {
          this.tagType[index] = ''
        }
      })
    },
    //路由跳转
    routerJump (url) {
      this.$router.push(`/home/${url}`)
    }
  },
  created () {
    this.changeType()
  }
};
</script>

<style scoped>
.el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
